<template>
  <div :class="config.tightBorder ? 'tight-container' : 'container'">
    <template v-if="isAuthPath || isAuthorized">
      <Sidebar></Sidebar>
      <div class="window-content">
        <router-view></router-view>
      </div>
    </template>


    <template v-else>
      <Auth></Auth>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useConfigStore } from "@/store/useConfigStore";
import Sidebar from "@/components/sidebar/Sidebar.vue";
import { useAuthStore } from "@/store/useAuthStore";
import { ref } from "vue";
import Auth from "./auth/Auth.vue";

const isAuthPath = ref(location.pathname === '/auth');

const authStore = useAuthStore();

const isAuthorized = ref(authStore.isAuthorized());

const config = useConfigStore();
</script>

<style scoped lang="scss">
@mixin container {
  min-width: 600px;
  min-height: 480px;
  max-width: 1200px;
  border: var(--border-in-light);
  border-radius: 15px;
  box-shadow: var(--shadow);
  color: var(--black);
  background-color: var(--white);

  display: flex;
  overflow: hidden;
  box-sizing: border-box;

  width: var(--window-width);
  height: var(--window-height);
}

.container {
  @include container();
}

// 使用 @media，可以根据设备的屏幕尺寸或方向，应用不同的 CSS 样式。
@media only screen and (min-width: 600px) {
  .tight-container {
    --window-width: 100vw;
    --window-height: var(--full-height);
    --window-content-width: calc(100% - var(--sidebar-width));

    @include container();

    max-width: 100vw;
    max-height: var(--full-height);

    border-radius: 0;
    border: 0;
  }
}

.window-content {
  width: var(--window-content-width);
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
